<template>
    <div>
        <div style="width:50%">

            <el-table
                :data="dynamicList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                stripe
                border
                style="margin-top: 50px;"
                size="small"
            >
                <el-table-column
                    label="序号"
                    type="index"
                    width="80px"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="title"
                    label="标题"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="内容"
                    align="center"
                    width="100px"
                >
                    <template slot-scope="scope">
                        <el-link
                            type="primary"
                            @click="showDynamic(scope.row.id)"
                        >查看详情</el-link>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createDate"
                    label="时间"
                    width="100px"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="操作"
                    width="200px"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="handleEdit(scope.row.id)"
                            type="success"
                        >编辑</el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row.id)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页栏 -->
            <el-pagination
                layout="total, sizes, prev, pager, next, jumper"
                :total="dynamicList.length"
                :page-size="pageSize"
                :page-sizes="[5,10]"
                :current-page="currentPage"
                @current-change="changeCurrent"
                @size-change="changeSize"
                align="center"
                style="margin-top: 10px;"
            ></el-pagination>
        </div>
        <el-dialog
            title="动态详情"
            :visible.sync="contentVisible"
            :close-on-click-modal="false"
            width="600px"
        >
            <div v-html="currentDynamic.content"></div>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="danger"
                    @click="contentVisible = false"
                >关闭</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="编辑动态"
            :visible.sync="dynamicVisible"
        >
            <div style="margin-bottom: 20px;">
                <label>标题：</label>
                <el-input
                    style="width: 30%; margin-right: 20px"
                    type="text"
                    v-model="currentDynamic.title"
                ></el-input>
                <label>时间：</label>
                <el-date-picker
                    v-model="currentDynamic.createDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    :default-value="currentDynamic.createDate"
                ></el-date-picker>
            </div>
            <div ref="editor"></div>
            <div style="margin-top:20px;text-align:center">

                <el-button
                    type="primary"
                    @click="update"
                >提交</el-button>
                <el-button>重置</el-button>
            </div>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    @click="dynamicVisible = false"
                >关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import E from "wangeditor";
export default {
    data() {
        return {
            dynamicList: [],
            currentDynamic: {},
            currentPage: 1,
            pageSize: 10,
            contentVisible: false,
            dynamicVisible: false,
            editor: null
        };
    },
    methods: {
        // 初始化富文本编辑器
        initEditor() {
            this.editor = new E(this.$refs.editor);
            // this.editor.customConfig.uploadImgShowBase64 = true;
            this.editor.customConfig.showLinkImg = false;
            this.editor.customConfig.onchange = html => {
                this.editorContent = html;
            };
            this.editor.customConfig.zIndex = 100;
            this.editor.create();
        },
        // 获取所有的动态消息
        getDynamicList() {
            this.$http("/companyDynamic/getAll")
                .then(response => {
                    this.dynamicList = response.data;
                })
                .catch(err => err);
        },
        // 获取当前的动态
        showDynamic(id) {
            this.$http("/companyDynamic/getDynamicById?id=" + id)
                .then(response => {
                    this.currentDynamic = response.data;
                    this.contentVisible = true;
                })
                .catch(err => err);
        },
        // 根据id编辑动态
        handleEdit(id) {
            this.dynamicVisible = true;
            this.$http("/companyDynamic/getDynamicById?id=" + id).then(
                response => {
                    this.currentDynamic = response.data;
                    this.initEditor();
                    this.editor.txt.html(this.currentDynamic.content);
                }
            );
        },
        // 根据ID删除动态
        handleDelete(id) {
            this.$confirm("确认删除？删除后不可恢复！", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.$http("/companyDynamic/deleteDynamicById?id=" + id)
                        .then(response => {
                            this.$message({
                                type: "info",
                                message: response.data.message
                            });
                            this.getDynamicList();
                        })
                        .catch(err => err);
                })
                .catch(() => {});
        },
        update() {
            this.currentDynamic.content = this.editor.txt.html();
            this.$http({
                url: "/companyDynamic/update",
                method: "post",
                headers: {
                    "Content-Type":
                        "application/x-www-form-urlencoded; charset=UTF-8"
                },
                params: this.currentDynamic
            })
                .then(response => {
                    this.$message({
                        message: response.data.message,
                        type: "success"
                    });
                    this.getDynamicList();
                    this.dynamicVisible = false;
                })
                .catch(err => err);
        },
        // 改变当前的页码
        changeCurrent(currentPage) {
            this.currentPage = currentPage;
        },
        // 改变当前的显示条数
        changeSize(pageSize) {
            this.pageSize = pageSize;
        }
    },
    mounted() {
        this.getDynamicList();
    }
};
</script>

<style>
</style>